<template>
  <context-menu :menu="[{ label: '更多功能' }, { label: '联系我们' }, { label: '敬请期待' }]" @select="handleSelect">
    <div class="sidebarInfo">
      <div class="header">
        <el-icon class="logo">
          <VideoCamera />
        </el-icon>
        <span class="title">校园圈</span>
      </div>
      
      <div class="nav-menu">
        <div 
          v-for="(item, index) in menuItems" 
          :key="index"
          class="nav-item"
          :class="{ active: route.name === item.route }"
          @click="handleNavClick(item.route)"
        >
          <el-icon class="nav-icon">
            <component :is="item.icon" />
          </el-icon>
          <span class="nav-text">{{ item.label }}</span>
          
          <div class="active-indicator" v-if="route.name === item.route"></div>
        </div>
      </div>
    </div>
  </context-menu>
</template>

<script setup>
import { 
  House, 
  Star, 
  ChatDotRound, 
  DataBoard,
  School, 
  User,
  VideoCamera,
  Files
} from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import ContextMenu from './contextMenu/index.vue'

const router = useRouter()
const route = useRoute()

const menuItems = [
  { label: '学校', route: 'schoolSelect', icon: School },
  { label: '首页', route: 'home', icon: House },
  { label: '推荐', route: 'recommend', icon: Star },
  { label: '论坛', route: 'forum', icon: Files },
  { label: '朋友', route: 'friends', icon: ChatDotRound },
  { label: '我的', route: 'myVideo', icon: User },
  { label: '表白墙', route: 'confessionWall', icon: DataBoard }
]

const handleNavClick = (routeName) => {
  if (routeName !== route.name) {
    router.push({ name: routeName })
  }
}

const handleSelect = (item) => {
  console.log('Selected:', item)
  // 处理菜单选择逻辑
}
</script>

<style lang="scss" scoped>
.sidebarInfo {
  width: 200px;
  height: 100%;
  background: rgba(22, 24, 35, 0.9);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  
  .header {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .logo {
      width: 32px;
      height: 32px;
      font-size: 24px;
      color: rgb(255, 44, 85);
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
    
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.5px;
    }
  }
  
  .nav-menu {
    flex: 1;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    .nav-item {
      position: relative;
      height: 44px;
      padding: 0 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: rgba(255, 255, 255, 0.6);
      
      .nav-icon {
        font-size: 20px;
      }
      
      .nav-text {
        font-size: 15px;
        font-weight: 500;
      }
      
      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
      
      &.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.15);
        
        .active-indicator {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 20px;
          background: rgb(255, 44, 85);
          border-radius: 0 4px 4px 0;
        }
      }
    }
  }
}

// 暗色主题适配
html.dark {
  .sidebarInfo {
    background: rgba(22, 24, 35, 0.95);
  }
}
</style>